<template>
	<view class="navbar-wrap" :style="{ height: isPlaceholder ? placeHolderHeight + 'px' : 0 }">
		<view class="navbar-content" :style="{ height: barHeight + 'px', paddingTop: barTop + 'px', backgroundColor: bgColor, color: frontColor, position: isFixed ? 'fixed' : 'static' }">
			<view class="navbar-left" v-if="showLeftIcon">
				<image v-if="showLeftIcon" :src="backIcon" mode="widthFix" class="nav-icon" @tap="back" />
			</view>
			<view class="navbar-text" :style="{ textAlign: textAlign,paddingRight: showLeftIcon ? '84rpx' : '0' }">{{ text }}</view>
		</view>
	</view>
</template>
<script setup>
import { computed, watch } from "vue";

const props = defineProps({
	bgColor: {
		type: String,
		default: "tansparent",
	},
	frontColor: {
		type: String,
		default: "#ffffff",
	},
	text: {
		type: String,
		default: "",
	},
	textAlign: {
		type: String,
		default: "center",
	},
	//是否占位
	isPlaceholder: {
		type: Boolean,
		default: false,
	},
	showLeftIcon: {
		type: Boolean,
		default: false,
	},
	isFixed: {
		type: Boolean,
		default: true,
	},
});

const {customNavBar} = uni.getStorageSync('useBaseConfig')
const barTop = customNavBar.barTop;
const barHeight = customNavBar.barHeight;
const placeHolderHeight = customNavBar.placeHolderHeight - 1; 

let backIcon = computed(() => {
	const whiteBackIcon = "https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/arrow-left.png";
	const blackBackIcon = "https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/common/arrow-left-black.png";
	return props.frontColor == "#ffffff" ? whiteBackIcon : blackBackIcon;
});

watch(props, () => {
	//计算胶囊的颜色
	let frontColor = props.frontColor == "#ffffff" ? "#ffffff" : "#000000"
	uni.setNavigationBarColor({
		backgroundColor: props.bgColor,
		frontColor,
	});
}, {
	immediate: true
});

const back = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack({
			delta: 1,
		});
	} else {
		uni.reLaunch({
			url: "/pages/index/index",
		});
	}
};
</script>
<style lang="scss" scoped>
.navbar-wrap {
	width: 100%;
	box-sizing: border-box;
	transition: all 0.2s ease-in;

	.navbar-content {
		transition: all 0.2s ease-in;
		color: #fff;
		// position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		padding: 0 36rpx 8rpx;
		box-sizing: content-box;

		.navbar-left {
			width: 84rpx;
		}

		.navbar-text {			
			font-size: 32rpx;
			font-family: PingFang-SC-Heavy, PingFang-SC;
			line-height: 1;
			padding-bottom: 4rpx;
			font-weight: 600;
			flex: 1;
			max-width: 360rpx;
			margin: 0rpx auto;
			overflow: hidden;
			text-overflow: ellipsis;
			// 显示一行  多余隐藏
			white-space: nowrap;
			text-align: center;
		}

		.nav-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
}
</style>